<template>
	<view class="wrapper">
		<view class="conent">{{title}}</view>
		<view class="input-number">
			<view class="crease" @click="crease(true)">-</view>
			<input @input="crease" type="number" :value="value" class="input" />
			<view class="crease" @click="crease(false)">+</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['title','value'],
		methods:{
			crease(flag){
				if( flag.detail && flag.detail.value){
					if(flag.detail.value<0) return
					this.$emit('change',flag.detail.value);
					return
				}
				let value = this.value
				if(value < 0) return
				flag ? value-- : value++;
				this.$emit('change',value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper{
		display: flex;
		justify-content: space-between;
		padding: 10px;
		align-items: center;
		font-size:13px;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(57,66,91,1);
	}
	.input-number{
		display: flex;
		align-items: center;
	}
	.crease{
		width:26px;
		height:23px;
		background:rgba(244,244,244,1);
		border-radius:2px 0px 0px 2px;
		line-height: 23px;
		text-align: center;
	}
.input{
	width:30px;
	height:23px;
	background:rgba(235,235,235,1);
	padding: 3px 0px;
	text-align: center;
	box-sizing: border-box;
	font-size:14px;
	font-family:DIN;
	font-weight:bold;
	color:rgba(66,75,97,1);
}
</style>
